import React from "react";
import "styles/login/components/steps-info.scss";

const Step = ({ title, className }) => {
  return (
    <div className={`flex-item ${className}`}>
      <div className="line"></div>
      <div className="dot"></div>
      <div className="title">{title}</div>
    </div>
  );
};

export default function ({ stepList = [], current = 0 }) {
  if (typeof current === "string") {
    current = stepList.findIndex((step) => step.key === current);
    if (current === -1) {
      current = 0;
    }
  }
  return (
    <div className={"steps-info-wrapper display-flex"}>
      {stepList.map((step, index) => (
        <Step {...step} className={`${index <= current ? "active" : ""}`} />
      ))}
    </div>
  );
}
